<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 基金概览 -->
      <div class="section info-section">
        <div class="section-header">
          <h2><el-icon><InfoFilled /></el-icon> 基金介绍</h2>
          <div class="divider"></div>
        </div>
        
        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
            <el-card class="content-card">
              <el-descriptions :column="1" border class="descriptions">
                <el-descriptions-item label="基金简介">
                  <div class="fund-desc">
                    三修基金是我族重要的公益基金，专注于"修谱、修墓、修祠"三大领域，旨在传承家族文化、维护祖先墓地、建设宗祠。基金由宗亲共同捐资设立，为家族发展提供重要支持。
                  </div>
                  <div class="fund-desc">
                    基金成立于2010年，由族内德高望重的长辈共同发起，至今已完成多项重要工程，包括族谱编修整理、祖先墓地修缮、宗祠大殿建设等。
                  </div>
                </el-descriptions-item>
              </el-descriptions>
              
              <el-row class="fund-stats" :gutter="16">
                <el-col :span="8">
                  <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                      <i class="el-icon-money"></i>
                      <div class="stat-number">¥ {{ totalAmount }}</div>
                      <div class="stat-label">累计捐赠</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                      <i class="el-icon-user"></i>
                      <div class="stat-number">{{ donorCount }}</div>
                      <div class="stat-label">捐赠人数</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                      <i class="el-icon-collection"></i>
                      <div class="stat-number">{{ projectCount }}</div>
                      <div class="stat-label">资助项目</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <div class="progress-container">
                <div class="progress-header">
                  <span>当前目标：宗祠大殿修缮工程</span>
                  <span>目标金额：¥ 1,000,000</span>
                </div>
                <el-progress :percentage="fundProgress" :color="progressColor" :format="percent => `${percent}%`" />
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-card class="donation-form-card">
              <template #header>
                <div class="form-header">
                  <i class="el-icon-s-finance"></i> 我要捐赠
                </div>
              </template>
              <el-form label-position="top" :model="donationForm">
                <el-form-item label="捐赠人">
                  <el-input v-model="donationForm.name" placeholder="请输入您的姓名" />
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="donationForm.phone" placeholder="请输入您的联系电话" />
                </el-form-item>
                <el-form-item label="捐赠金额">
                  <el-input-number v-model="donationForm.amount" :min="1" style="width: 100%" />
                </el-form-item>
                <el-form-item label="捐赠用途">
                  <el-select v-model="donationForm.purpose" placeholder="请选择捐赠用途" style="width: 100%">
                    <el-option label="修谱" value="修谱" />
                    <el-option label="修墓" value="修墓" />
                    <el-option label="修祠" value="修祠" />
                    <el-option label="不指定用途" value="不指定" />
                  </el-select>
                </el-form-item>
                <el-form-item label="留言">
                  <el-input v-model="donationForm.message" type="textarea" :rows="2" placeholder="请输入您的留言" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleDonate" style="width: 100%">立即捐赠</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 三修项目展示 -->
      <div class="section">
        <div class="section-header">
          <h2><i class="el-icon-s-cooperation"></i> 三修项目</h2>
          <div class="divider"></div>
        </div>
        
        <el-card class="content-card">
          <el-tabs type="border-card">
            <el-tab-pane label="修谱">
              <el-row :gutter="24">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-content">
                    <h3>{{ projectData.genealogy.title }}</h3>
                    <p>{{ projectData.genealogy.description }}</p>
                    <p>{{ projectData.genealogy.details }}</p>
                    <el-descriptions title="项目详情" :column="2" border>
                      <el-descriptions-item label="开始时间">{{ projectData.genealogy.startTime }}</el-descriptions-item>
                      <el-descriptions-item label="预计完工">{{ projectData.genealogy.endTime }}</el-descriptions-item>
                      <el-descriptions-item label="预算金额">¥ {{ projectData.genealogy.budget }}</el-descriptions-item>
                      <el-descriptions-item label="负责人">{{ projectData.genealogy.leader }}</el-descriptions-item>
                      <el-descriptions-item label="已筹金额" :span="2">¥ {{ projectData.genealogy.raised }}</el-descriptions-item>
                      <el-descriptions-item label="项目进度" :span="2">
                        <el-progress :percentage="projectData.genealogy.progress" />
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-gallery">
                    <el-image :src="'/logo.png'" fit="cover" class="main-image" />
                    <el-row :gutter="10" class="image-grid">
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            
            <el-tab-pane label="修墓">
              <el-row :gutter="24">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-content">
                    <h3>{{ projectData.tomb.title }}</h3>
                    <p>{{ projectData.tomb.description }}</p>
                    <p>{{ projectData.tomb.details }}</p>
                    <el-descriptions title="项目详情" :column="2" border>
                      <el-descriptions-item label="开始时间">{{ projectData.tomb.startTime }}</el-descriptions-item>
                      <el-descriptions-item label="预计完工">{{ projectData.tomb.endTime }}</el-descriptions-item>
                      <el-descriptions-item label="预算金额">¥ {{ projectData.tomb.budget }}</el-descriptions-item>
                      <el-descriptions-item label="负责人">{{ projectData.tomb.leader }}</el-descriptions-item>
                      <el-descriptions-item label="已筹金额" :span="2">¥ {{ projectData.tomb.raised }}</el-descriptions-item>
                      <el-descriptions-item label="项目进度" :span="2">
                        <el-progress :percentage="projectData.tomb.progress" />
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-gallery">
                    <el-image :src="'/logo.png'" fit="cover" class="main-image" />
                    <el-row :gutter="10" class="image-grid">
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            
            <el-tab-pane label="修祠">
              <el-row :gutter="24">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-content">
                    <h3>{{ projectData.temple.title }}</h3>
                    <p>{{ projectData.temple.description }}</p>
                    <p>{{ projectData.temple.details }}</p>
                    <el-descriptions title="项目详情" :column="2" border>
                      <el-descriptions-item label="开始时间">{{ projectData.temple.startTime }}</el-descriptions-item>
                      <el-descriptions-item label="预计完工">{{ projectData.temple.endTime }}</el-descriptions-item>
                      <el-descriptions-item label="预算金额">¥ {{ projectData.temple.budget }}</el-descriptions-item>
                      <el-descriptions-item label="负责人">{{ projectData.temple.leader }}</el-descriptions-item>
                      <el-descriptions-item label="已筹金额" :span="2">¥ {{ projectData.temple.raised }}</el-descriptions-item>
                      <el-descriptions-item label="项目进度" :span="2">
                        <el-progress :percentage="projectData.temple.progress" />
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="project-gallery">
                    <el-image :src="'/logo.png'" fit="cover" class="main-image" />
                    <el-row :gutter="10" class="image-grid">
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                      <el-col :span="8">
                        <el-image :src="'/logo.png'" fit="cover" />
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
      
      <!-- 捐赠记录 -->
      <div class="section">
        <div class="section-header">
          <h2><i class="el-icon-s-data"></i> 捐赠记录</h2>
          <div class="divider"></div>
        </div>
        
        <el-card class="content-card">
          <div class="table-operations">
            <el-input
              v-model="searchValue"
              placeholder="搜索捐赠人"
              style="width: 200px"
              clearable
              @keyup.enter="onSearch"
            >
              <template #prefix><i class="el-icon-search"></i></template>
            </el-input>
            
            <el-select v-model="filterPurpose" placeholder="按用途筛选" style="width: 150px" @change="onFilterChange">
              <el-option label="全部用途" value="" />
              <el-option label="修谱" value="修谱" />
              <el-option label="修墓" value="修墓" />
              <el-option label="修祠" value="修祠" />
            </el-select>
          </div>
          
          <el-table :data="filteredRecords" border style="width: 100%">
            <el-table-column prop="donor" label="捐赠人" width="120" />
            <el-table-column prop="amount" label="捐赠金额" width="120">
              <template #default="scope">
                <span class="amount">¥ {{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="捐赠时间" width="180" />
            <el-table-column prop="purpose" label="用途" width="120" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已到账' ? 'success' : 'info'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button type="text" @click="showDonationDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <el-pagination
            v-if="donationRecords.length > 10"
            :page-size="10"
            layout="prev, pager, next"
            :total="donationRecords.length"
            class="pagination"
          />
        </el-card>
      </div>
    </el-card>
    
    <!-- 捐赠详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="`捐赠详情 - ${currentRecord?.donor || ''}`"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="捐赠人">{{ currentRecord?.donor }}</el-descriptions-item>
        <el-descriptions-item label="捐赠金额">¥ {{ currentRecord?.amount }}</el-descriptions-item>
        <el-descriptions-item label="捐赠时间">{{ currentRecord?.date }}</el-descriptions-item>
        <el-descriptions-item label="捐赠用途">{{ currentRecord?.purpose }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="currentRecord?.status === '已到账' ? 'success' : 'info'">
            {{ currentRecord?.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="留言">{{ currentRecord?.message || '无留言' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 基金统计数据
const totalAmount = ref('528,800')
const donorCount = ref(156)
const projectCount = ref(3)
const fundProgress = ref(53)
const progressColor = '#67C23A'

// 三修项目数据
const projectData = ref({
  temple: {
    title: '宗祠修缮工程',
    description: '宗祠是家族精神的象征，是凝聚宗亲的重要场所。我们的宗祠始建于清朝乾隆年间，历经数百年风雨，需要定期修缮以保持其历史风貌和使用功能。',
    details: '当前修缮项目包括：大殿屋顶翻修、祠堂立柱加固、墙壁彩绘修复、排水系统改造等。',
    startTime: '2024年3月',
    endTime: '2024年10月',
    budget: '650,000',
    leader: '张大善',
    raised: '320,000',
    progress: 49
  },
  genealogy: {
    title: '族谱修编工程',
    description: '族谱是家族血脉的记录，是传承家族历史的重要载体。我们的族谱每隔30年进行一次大修，同时进行数字化保存工作。',
    details: '当前修谱项目包括：族谱资料收集、谱系整理、数字化录入、印刷出版等。',
    startTime: '2023年9月',
    endTime: '2025年6月',
    budget: '280,000',
    leader: '李善缘',
    raised: '150,000',
    progress: 54
  },
  tomb: {
    title: '祖先墓地修缮工程',
    description: '祖先墓地是对先人的敬仰与缅怀，是家族根脉所在。随着时间推移，墓地需要定期修缮以保持其庄严与肃穆。',
    details: '当前修墓项目包括：墓地环境整治、墓碑修复、道路硬化、绿化美化、排水系统改善等。',
    startTime: '2024年1月',
    endTime: '2024年12月',
    budget: '120,000',
    leader: '王积德',
    raised: '58,800',
    progress: 49
  }
})

// 捐赠表单
const donationForm = ref({
  name: '',
  phone: '',
  amount: 1000,
  purpose: '修祠',
  message: ''
})

// 捐赠记录表格
const searchValue = ref('')
const filterPurpose = ref('')
const detailVisible = ref(false)
const currentRecord = ref(null)

const donationRecords = [
  {
    key: '1',
    donor: '张三',
    amount: '50,000',
    date: '2024-03-15',
    purpose: '修祠',
    status: '已到账',
    message: '希望宗祠早日修缮完成，让后人有个缅怀先祖的地方。'
  },
  {
    key: '2',
    donor: '李四',
    amount: '30,000',
    date: '2024-03-14',
    purpose: '修谱',
    status: '已到账',
    message: '族谱承载着我们的历史，愿为修谱工作尽一份力。'
  },
  {
    key: '3',
    donor: '王五',
    amount: '20,000',
    date: '2024-03-13',
    purpose: '修祠',
    status: '处理中',
    message: ''
  },
  {
    key: '4',
    donor: '赵六',
    amount: '15,000',
    date: '2024-03-10',
    purpose: '修墓',
    status: '已到账',
    message: '先祖墓地需要好好修缮，以示后人敬意。'
  },
  {
    key: '5',
    donor: '钱七',
    amount: '10,000',
    date: '2024-03-08',
    purpose: '修谱',
    status: '已到账',
    message: ''
  },
  {
    key: '6',
    donor: '孙八',
    amount: '8,000',
    date: '2024-03-05',
    purpose: '修祠',
    status: '已到账',
    message: ''
  }
]

// 计算属性：过滤后的记录
const filteredRecords = computed(() => {
  let result = donationRecords
  
  if (searchValue.value) {
    result = result.filter(record => 
      record.donor.includes(searchValue.value)
    )
  }
  
  if (filterPurpose.value) {
    result = result.filter(record => 
      record.purpose === filterPurpose.value
    )
  }
  
  return result
})

// 方法
const handleDonate = () => {
  // 处理捐赠逻辑，这里只是简单提示
  alert(`感谢${donationForm.value.name}的捐赠：¥${donationForm.value.amount}`)
  // 实际应用中这里会提交到后端
}

const onSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const onFilterChange = () => {
  // 筛选逻辑已在计算属性中处理
}

const showDonationDetail = (record) => {
  currentRecord.value = record
  detailVisible.value = true
}

onMounted(() => {
  // 初始化逻辑
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section {
  margin-top: 40px;
}

.section:first-child {
  margin-top: 20px;
}

.section-header {
  position: relative;
  margin-bottom: 25px;
}

.section h2 {
  font-size: 22px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}

.divider {
  height: 3px;
  width: 60px;
  background-color: #409EFF;
  margin-bottom: 15px;
}

.content-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fund-desc {
  line-height: 1.8;
  color: #606266;
  text-align: justify;
  margin-bottom: 15px;
  text-indent: 2em;
}

.fund-stats {
  margin: 20px 0;
}

.stat-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border-radius: 8px;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
  padding: 20px 0;
}

.stat-item i {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 10px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.progress-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
}

.donation-form-card {
  height: 100%;
  border-left: 4px solid #409EFF;
  border-radius: 8px;
}

.form-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.form-header i {
  margin-right: 5px;
  color: #409EFF;
}

.project-content {
  padding: 20px;
}

.project-content h3 {
  font-size: 20px;
  color: #409EFF;
  margin-bottom: 15px;
}

.project-content p {
  line-height: 1.8;
  color: #606266;
  margin-bottom: 15px;
  text-indent: 2em;
}

.project-gallery {
  padding: 20px;
}

.main-image {
  width: 100%;
  height: 250px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-grid {
  margin-top: 10px;
}

.image-grid .el-image {
  width: 100%;
  height: 80px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.table-operations {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
}

.amount {
  color: #67C23A;
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.section-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h2 .el-icon {
  font-size: 20px;
  color: #409EFF;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .fund-stats {
    margin: 10px 0;
  }
  
  .stat-card {
    margin-bottom: 10px;
  }
  
  .project-content, .project-gallery {
    padding: 15px 10px;
  }
  
  .main-image {
    height: 200px;
  }
  
  .table-operations {
    flex-direction: column;
    gap: 10px;
  }
  
  .table-operations .el-input,
  .table-operations .el-select {
    width: 100% !important;
  }
}
</style> 